<template>
	<view>
		<view class="bar-fixed">
			<status-bar />
			<view class="serach">
				<view class="backIcon" v-if="backIcon" @tap="goBack"><icon-font type="back" color="#fff" size="18" /></view>
				<view class="content" :style="{ 'border-radius': radius + 'px' }">
					<view class="content-box" :class="{ center: mode === 2 }">
						<text class="icon icon-serach"></text>
						<input
							:placeholder="placeholder"
							:class="{ center: !active && mode === 2 }"
							:focus="isFocus"
							class="input"
							placeholder-class="text-dark-gray text-lg"
							v-model="inputVal"
							confirm-type="search"
							@input="inputChange"
							@confirm="triggerConfirm"
							@focus="focus"
							@blur="blur"
						/>
						<text v-if="isDelShow" class="icon icon-del" @click.stop="clear"></text>
					</view>
					<view v-show="(active && show && button === 'inside') || (isDelShow && button === 'inside')" class="serachBtn" @click="search">搜索</view>
				</view>
				<view v-if="button === 'outside'" class="button" :class="{ active: show || active }" @click="search">
					<view class="button-item text-white">{{ !show ? searchName : '搜索' }}</view>
				</view>
			</view>
		</view>
		<view>
			<status-bar />
			<view class="al-navbar__placeholder-view" />
		</view>
	</view>
</template>

<script>
import statusBar from '@/components/status-bar.vue';
export default {
	components: {
		statusBar
	},
	props: {
		mode: {
			value: Number,
			default: 1
		},
		placeholder: {
			value: String,
			default: '搜索商品 领优惠券返现金'
		},
		value: {
			type: String,
			default: false
		},
		button: {
			value: String,
			default: 'outside'
		},
		show: {
			value: Boolean,
			default: true
		},
		radius: {
			value: String,
			default: 60
		},
		backIcon: {
			value: Boolean,
			default: false
		}
	},
	data() {
		return {
			active: false,
			inputVal: '',
			searchName: '取消',
			isDelShow: false,
			isFocus: false
		};
	},
	created(){
		this.inputVal=this.value;
	},
	methods: {
		triggerConfirm() {
			uni.hideKeyboard();
			this.$emit('confirm', false);
		},
		inputChange(event) {
			var keyword = event.detail.value;
			this.$emit('input', keyword);
			if (this.inputVal) {
				this.isDelShow = true;
			}
		},
		focus() {
			this.active = true;
			if (this.inputVal) {
				this.isDelShow = true;
			}
		},
		blur() {
			this.isFocus = false;
			if (!this.inputVal) {
				this.active = false;
			}
		},
		clear() {
			//HM修改 收起键盘
			uni.hideKeyboard();
			this.isFocus = false;
			this.inputVal = '';
			this.active = false;
			//HM修改 清空内容时候触发组件input
			this.$emit('input', '');
		},
		getFocus() {
			if (!this.isFocus) {
				this.isFocus = true;
			}
		},
		search() {
			//HM修改 增加点击取消时候退出输入状态，内容为空时，输入默认关键字
			if (!this.inputVal) {
				if (!this.show && this.searchName == '取消') {
					uni.hideKeyboard();
					this.isFocus = false;
					this.active = false;
					return;
				}
			}
			//console.log(this.inputVal);
			this.$emit('search', this.inputVal ? this.inputVal : this.placeholder);
		},
		goBack() {
			this.$emit('goBack');
		}
	},
	watch: {
		inputVal(newVal) {
			if (newVal) {
				this.searchName = '搜索';
			} else {
				this.searchName = '取消';
				this.isDelShow = false;
			}
		},
		//HM修改 双向绑定
		value(val) {
			this.inputVal = val;
		}
	}
};
</script>

<style lang="scss">

.al-navbar__placeholder-view {
	height: 83upx;
}
.bar-fixed {
	position: fixed;
	z-index: 998;
	background-color: #d03032;
	width: 100%;
}
.serach {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	padding: 5upx 8upx 15upx 8upx;
	.backIcon {
		display: flex;
		align-items: center;
		height: 65upx;
		padding-left: 5rpx;
		padding-right: 10rpx;
	}
	.content {
		display: flex;
		align-items: center;
		width: 100%;
		height: 65upx;
		background-color: rgba(231, 231, 231, 0.7);
		overflow: hidden;
		transition: all 0.2s linear;
		border-radius: 30px;

		.content-box {
			width: 100%;
			display: flex;
			align-items: center;
			&.center {
				justify-content: center;
			}
			.icon {
				font-family: "iconfont";
				padding: 0 15upx;
				color: #6f6f6f;
				font-size: 38upx;
				&.icon-del {
					&:before {
						content: '\e809';
					}
				}
				&.icon-serach:before {
					content: '\e6d0';
				}
			}
			.input {
				width: 100%;
				max-width: 100%;
				line-height: 65upx;
				height: 65upx;
				transition: all 0.2s linear;
				&.center {
					width: 380upx;
				}
				&.sub {
					width: auto;
					color: grey;
				}
			}
		}
		.serachBtn {
			height: 100%;
			flex-shrink: 0;
			padding: 0 30upx;
			//HM修改 按钮背景色
			background: linear-gradient(to right, #ff9801, #ff570a);
			//background: $uni-color-success;
			line-height: 60upx;
			color: #fff;
			//border-left: 1px #ccc solid; //HM修改 去掉边框
			transition: all 0.3s;
		}
	}

	.button {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		flex-shrink: 0;
		width: 0;
		transition: all 0.2s linear;
		white-space: nowrap;
		overflow: hidden;
		&.active {
			padding-left: 15upx;
			width: 100upx;
		}
	}
}

</style>
